
//第几个json
var page = 1;


//点击换一换js代码
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            var json = JSON.parse(xmlhttp.responseText);
            console.log(json);
            //    对数组进行循环
            for (let i = 0; i < json.shop.length; i++) {
                console.log(json.shop[i]);
                //    创建HTML结构
                var div = document.createElement('div');
                div.classList.add('m-1');
                div.classList.add('left');
                div.classList.add('clearfix');
                var m_left = document.createElement('div');
                m_left.classList.add('m_left');
                m_left.classList.add('left');
                var img = document.createElement('img');
                img.src = json.shop[i].pic;
                m_left.appendChild(img);
                var m_right = document.createElement('div');
                m_right.classList.add('m_right');
                m_right.classList.add('right');
                var h4 = document.createElement('h4');
                h4.innerHTML = json.shop[i].title;
                var sp1 = document.createElement('span');
                sp1.innerHTML = json.shop[i].sp1;
                var pro = document.createElement('div');
                pro.classList.add('progress');
                var pro_bar = document.createElement('div');
                pro_bar.classList.add('progress-bar');
                pro.appendChild(pro_bar);
                var desc = document.createElement('div');
                desc.classList.add('desc');
                desc.classList.add('clearfix');
                var per = document.createElement('span');
                per.classList.add('percentage');
                per.classList.add('left');
                per.innerHTML = json.shop[i].per;
                var let1 = document.createElement('span');
                let1.classList.add('letter');
                let1.classList.add('right');
                let1.innerHTML = json.shop[i].let1;
                desc.appendChild(per);
                desc.appendChild(let1);
                var price = document.createElement('div');
                price.classList.add('price');
                var sp2 = document.createElement('span');
                sp2.innerHTML = json.shop[i].sp2;
                sp2.classList.add('sp2');
                var sp3 = document.createElement('span');
                sp3.innerHTML = json.shop[i].sp3;
                sp3.classList.add('sp3');
                var sp4 = document.createElement('del');
                sp4.innerHTML = json.shop[i].sp4;
                sp4.classList.add('sp4');
                price.appendChild(sp2);
                price.appendChild(sp3);
                price.appendChild(sp4);
                m_right.appendChild(h4);
                m_right.appendChild(sp1);
                m_right.appendChild(pro);
                m_right.appendChild(pro_bar);
                m_right.appendChild(desc);
                m_right.appendChild(price);
                div.appendChild(m_left);
                div.appendChild(m_right);

                //  把所有的div追加到#list里面
                document.querySelector("#list").appendChild(div)
            }
        }
    };
    xmlhttp.open("GET", "json/test"+page+".json",true);
    xmlhttp.send();
}

loadXMLDoc();


//点击事件
document.querySelector("#btn").addEventListener("click", function (){
    if (page >= 5){
        page = 1;
    }else{
        page++;
    }
//    先清空
    document.querySelector("#list").innerHTML = "";
//    再取数据放到 #list 里面
    loadXMLDoc();
});
